{% extends "openvolunteer/base.html" %}

{% block title %}OpenVolunteer | Fiche détaillée d'un bénévole{% endblock %}

{% block content %}
    <div class="volunteer">
        {% if volunteer.avatar %}
            <div class="photo">
                <img src="{{ volunteer.get_photo_url }}" alt="Photo de {{ volunteer }}">
            </div>
        {% endif %}
        <div class="details">
            <table>
                <tr>
                    <th>Nom</th>
                    <td>{{ volunteer.name }}</td>
                </tr>
                <tr>
                    <th>Prénom</th>
                    <td>{{ volunteer.firstname }}</td>
                </tr>
                <tr>
                    <th>Email</th>
                    <td>
                        <a href="mailto:{{ volunteer.email }}" title="envoyer un email">{{ volunteer.email }}</a>
                    </td>
                </tr>
                <tr>
                    <th>Téléphone fixe</th>
                    <td>
                        {% if volunteer.phone_home %}
                            <a href="javascript:;" onclick="$('#dialog_qr_home').dialog('open');">{{ volunteer.phone_home }}</a>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th>Téléphone mobile</th>
                    <td>
                        {% if volunteer.phone_mobile %}
                            <a href="javascript:;" onclick="$('#dialog_qr_mobile').dialog('open');">{{ volunteer.phone_mobile }}</a>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th>Adresse</th>
                    <td>{{ volunteer.address }}</td>
                </tr>
                <tr>
                    <th>Date de naissance</th>
                    <td>{{ volunteer.birthday|date:"d F Y" }}</td>
                </tr>
                <tr>
                    <th>Lieu de naissance</th>
                    <td>{{ volunteer.birth_place }}</td>
                </tr>
                <tr>
                    <th>Numéro de sécu</th>
                    <td>{% if volunteer.social_security_number %}
                            {{ volunteer.social_security_number }}
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th>Première inscription</th>
                    <td>{{ volunteer.inscription_date|date:"d F Y" }}</td>
                </tr>
                <tr>
                    <th>Membre du CA?</th>
                    <td>
                        {% if volunteer.ca_member %}
                            <img src="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/files/icons/yes.png" alt="oui" class="icon">
                        {% else %}
                            <img src="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/files/icons/no.png" alt="non" class="icon">
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th>Commentaires</th>
                    <td style="text-align:center;"><textarea readonly>{{ volunteer.comments }}</textarea></td>
                </tr>
            </table>
        </div>
    </div>
    {% if volunteer.phone_home %}
        <div id="dialog_qr_home" title="Téléphone fixe de {{volunteer.firstname}} {{volunteer.name}} :" style="text-align:center;">
            <img src="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=tel:{{ volunteer.phone_home }}" alt="QRcode pour le téléphone fixe de {{volunteer.firstname}} {{volunteer.name}}">
        </div>
        <script type="text/javascript">
            $(function() {
                $("#dialog_qr_home").dialog({
                    bgiframe: true,
                    height: 210,
                    width:400,
                    modal: true,
                    autoOpen: false
                });
            });
        </script>
    {% endif %}
    {% if volunteer.phone_mobile %}
        <div id="dialog_qr_mobile" title="Téléphone mobile de {{volunteer.firstname}} {{volunteer.name}} :" style="text-align:center;">
            <img src="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=tel:{{ volunteer.phone_mobile }}" alt="QRcode pour le téléphone mobile de {{volunteer.firstname}} {{volunteer.name}}">
        </div>
        <script type="text/javascript">
            $(function() {
                $("#dialog_qr_mobile").dialog({
                    bgiframe: true,
                    height: 210,
                    width:400,
                    modal: true,
                    autoOpen: false
                });
            });
        </script>
    {% endif %}
{% endblock %}

{% block navigation %}
    <div id="dialog_conf_delete" title="Supprimer cette fiche?" style="text-align:center;">
        <p>Êtes vous sûr de vouloir supprimer cette fiche bénévole?</p>
        <p><a href="{{ volunteer.get_delete_url }}" title="Confirmer l'opération">Confirmer</a></p>
    </div>
    <script>
        $(function() {
            $("#dialog_conf_delete").dialog({
                bgiframe: true,
                modal: true,
                autoOpen: false
            });
        });
    </script>
    <ul>
        <li>
            <a href="{{ volunteer.get_edit_url }}"
               title="Modifier cette fiche">
               Modifier cette fiche
            </a>
        </li>
        <li>
            <a href="{{ volunteer.get_vcard_url }}"
               title="Télécharger la vcard de {{ volunteer }}">
               Télécharger la Vcard
            </a>
        </li>
        <li>
            <a href="javascript:;" onclick="$('#dialog_conf_delete').dialog('open')" title="Supprimer cette fiche">
                Supprimer cette fiche
            </a>
        </li>
    </ul>
{% endblock %}
